<template>
    <div class="coupon-tip">
        <p>您有一张 <span>首单1元3小时</span> 体验券</p>
        <i></i>
        <div>×</div>
    </div>
</template>

<script>
 export default {
    data () {
        return {

        }
    }
 }
</script>

<style scoped>
    .coupon-tip {
        width: 460px;
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        text-align: left;

        position: absolute;
        top: 20px;
        left: 0;

        background: rgba(46,55,53,0.90);
        box-shadow: 0 4px 6px 0 rgba(66,75,71,0.20);
        border-radius: 0 30px 30px 0;

        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #fff;
        letter-spacing: 0;
    }
    .coupon-tip p span {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #0db95f;
        letter-spacing: 0;
        line-height: 33px;
    }
    .coupon-tip i {
        display: block;
        width: 2px;
        height: 20px;

        position: absolute;
        top: 20px;
        right: 64px;

        background: rgba(255,255,255,0.10);
        border-radius: 10px;
    }
    .coupon-tip div {
        width: 28px;
        height: 28px;
        font-size: 28px;

        position: absolute;
        /*top: 16px;*/
        top: 0;
        right: 22px;
    }
</style>
